<template>
  <!-- 我的 -->
  <view class="container">
    <view class="navigationBar">
      <!-- 状态栏 -->
      <view :style="{ height: statusBarHeight + 'px', width: '100%' }" class="navbar-top">

      </view>
      <view class="navbar-content" :style="{ height: navBarHeight + 'px', width: '100%' }">
        <view @tap="goBack" class="iconBox">
          <image class="iconB" src="../static/ucenter/backB.png"></image>

        </view>
        <view class="inputBox">
          <uni-easyinput class="uni-mt-5" prefixIcon="search" clearable v-model="searchScenicName"
            placeholder="请输入自提点关键字" @iconClick="iconClick" @change="iconClick"></uni-easyinput>

        </view>
      </view>
    </view>
    <view class="contentBox">
      <view class="pickupNow" v-if="pointUse">
        <view class="head">
          <view class="left">当前自提点</view>
          <view class="right">
			<!--
            <image class="arrow" src="https://visionmpapi.jiuerjindi.com/upload/mp/pickupPoint/arrow.png"></image>
            <view class="text">导航到自提点 ></view>
			-->
          </view>
        </view>
        <view class="pointInfo" v-if="pointUse">
          <view class="left">
            <image :src="imgUrl + pointUse.image"></image>

          </view>
          <view class="right">
            <view class="name">{{ pointUse.name }}</view>
            <view class="addr">{{ pointUse.address }}</view>
            <view class="type">冷藏冷冻</view>
            <view class="distance">步行{{getDistance( pointUse.latitude ,pointUse.longitude )}}公里</view>
          </view>
          <view class="button">
            选此店
          </view>
        </view>

      </view>
      <view class="points">
        <view class="head">
          <view class="left">附近自提点</view>
          <view class="right">
			<!--
            <image class="location" src="https://visionmpapi.jiuerjindi.com/upload/mp/pickupPoint/location.png"></image>
            <view class="text">别墅区-西区 54号楼</view>
            <view class="text">查看地图 ></view>
			-->
          </view>
        </view>
        <view class="pointInfo" v-for="(item,index) in pointList">
          <view class="left">
            <image :src="imgUrl + item.image"></image>
          </view>
          <view class="right">
            <view class="name">{{ item.name }}</view>
            <view class="addr">{{ item.address }}</view>
            <view class="type">冷藏冷冻</view>
            <view class="distance">步行{{getDistance( item.latitude ,item.longitude )}}公里</view>

          </view>
          <view class="button " @tap="selectPoint(item)">
            选此店
          </view>
        </view> 
		
		
      </view>
    </view>

  </view>


  </view>
</template>

<script>
  const api = require("@/utils/api.js");
  const util = require("@/utils/util.js");
  const app = getApp();


  export default {
    data() {
      return {
        openId: '',
        statusBarHeight: 20,
        navBarHeight: 45,
        windowWidth: 375,
        hasLogin: false,
        selectedIndex: 0,

        imgUrl: '',
        productData: [],

        propStyles: {
          // scan: true
          iconSrc: 'add',
          zhanweiColor: '#FFFFFF',
          txtColor: '#333333',
          bgColor: '#FFFFFF',
          // bgSrc: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/bg1.png",
          // bgSrc1: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/bg2.png"
        },
		pointList:[],
		pointUse:null,

      };
    },

    methods: {
	  getDistance(lat1, lng1){
		if( lat1 && lng1){
			return util.getDistance(app.globalData.latitude,app.globalData.longitude, parseFloat(lat1),parseFloat(lng1) )  ;  
		}else{
			return "";
		}
		
	  },
      iconClick() {
        console.log('填写信息~~', this.searchScenicName);
        if (this.searchScenicName === '') {
          this.searchScenicName = ""
        }
		
		this.getShopTakeList();
        
      },
	  getShopTakeGetUse(){
		let params = {};
		let that = this;
		util.request(api.shopTakeGetUse, params
		  , 'GET', 'application/json').then(res => {
		    if (res.code == 200) {
				this.pointUse = res.data;
		    }
		  }).catch((err) => {
		    console.log('err', err)
		  });  
	  },
	  getShopTakeList(){
		let params = {page: 1, limit: 1000, longitude: app.globalData.longitude , latitude:app.globalData.latitude , search:this.searchScenicName };
		let that = this;
		util.request(api.shopTakeList, params
		  , 'GET', 'application/json').then(res => {
		    if (res.code == 200) {
				this.pointList = res.data.data;
		    }
		  }).catch((err) => {
		    console.log('err', err)
		  });  
	  },
	  setShopTakeSetUse(){
		let params = {  };
		let that = this;
		util.request(api.shopTakeSetUse, params
		  , 'GET', 'application/json').then(res => {
		    if (res.code == 200) {
				
		    }
		  }).catch((err) => {
		    console.log('err', err)
		  });    
	  },
	  selectPoint(item){
		let params = { id: item.id };
		util.request(api.shopTakeSetUse, params
		  , 'GET', 'application/json').then(res => {
		    if (res.code == 200) {
				uni.setStorageSync('pointSelect', item); // 存到缓存中
				uni.navigateBack ({
				    url: `/pages/index/index`,
				})
		    }
		  }).catch((err) => {
		    console.log('err', err)
		  });   
	  }
	  
    },



    mounted() {


    },
    created() {
      //获取手机系统信息
      const info = uni.getSystemInfoSync();
      //设置状态栏高度
      this.statusBarHeight = info.statusBarHeight;
      this.windowWidth = info.windowWidth;
      // h5 app mp-alipay没有胶囊按钮
      // #ifndef H5 || APP-PLUS || MP-ALIPAY
      // 获取胶囊的位置
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      // (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
      this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
        .statusBarHeight)
      this.windowWidth = menuButtonInfo.left
      // #endif
    },
    onLoad: function (option) {

      this.imgUrl = process.env.VUE_APP_BASE_URL ;
	  this.getShopTakeList();
	  this.getShopTakeGetUse();

    },
    onUnload() {

    },
    onShow: function () {


    },
            goback() {
                console.log("回去");
                uni.navigateBack();
            },

  };
</script>
<style lang="scss">
  page {
    height: 100vh;
    overflow: auto;
    background: #F4F4F4;
  }
</style>
<style lang="scss" scoped>
  page {
    background-color: #F8F8F8 !important;
  }

  .container {

    /* height: 100%;
    width: 100%; */
    .navigationBar {

      width: 750rpx;

      .navbar-content {
        font-family: OPPOSans, OPPOSans;
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
        padding-left: 30rpx;
        display: flex;
        align-items: center;

        .iconBox {
          height: 100%;
          display: flex;
          /* flex-direction: column; */
          justify-content: center;
          align-items: center;

          .iconB {
            width: 17rpx;
            height: 28rpx;
            z-index: 999;
            margin-right: 20rpx;
          }
        }
      }

    }

    .contentBox {
      width: 750rpx;
      padding: 30rpx;

      .pickupNow {
        margin-bottom: 20rpx;
        width: 690rpx;
        height: 410rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.16);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        padding: 46rpx 32rpx 0rpx 34rpx;
      }

      .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 36rpx;

        .left {
          font-family: OPPOSans, OPPOSans;
          font-weight: 500;
          font-size: 32rpx;
          color: #333333;
        }

        .right {
          display: flex;
          align-items: center;

          .arrow {
            width: 54rpx;
            height: 52rpx;
          }

          .location {
            width: 32rpx;
            height: 32rpx;
            margin-right: 10rpx;
          }

          .text {
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            font-size: 24rpx;
            color: rgba(51, 51, 51, 0.8);
          }
        }
      }

      .pointInfo {
        display: flex;
        width: 626rpx;
        position: relative;
        margin-top: 36rpx;
        .left {
          image {
            margin-right: 24rpx;
            width: 150rpx;
            height: 148rpx;
            border-radius: 10rpx 10rpx 10rpx 10rpx;
          }
        }

        .right {
          width: 449rpx;
          padding-bottom: 36rpx;
          border-bottom: 2rpx solid rgba(51, 51, 51, 0.1);

          .name {
            font-family: OPPOSans, OPPOSans;
            font-weight: 700;
            font-size: 36rpx;
            color: #333333;
            margin-bottom: 20rpx;
          }

          .addr {
            width: 338rpx;
            height: 72rpx;
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            font-size: 24rpx;
            color: #999999;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            margin-bottom: 12rpx;
          }

          .type {
            width: 92rpx;
            height: 38rpx;
            line-height: 38rpx;
            text-align: center;
            background: #FBEBE7;
            border-radius: 16rpx 16rpx 16rpx 16rpx;
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 16rpx;
            color: #D93F11;
            margin-bottom: 12rpx;
          }

          .distance {
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 24rpx;
            color: rgba(51, 51, 51, 0.8);
            margin-bottom: 12rpx;
          }

        }

        .button {
          position: absolute;
          width: 164rpx;
          height: 68rpx;
          line-height: 68rpx;
          text-align: center;
          background: #FECF01;
          box-shadow: 0rpx 6rpx 10rpx 4rpx rgba(0, 0, 0, 0.07);
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          font-family: OPPOSans, OPPOSans;
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          right: 0rpx;
          bottom: 36rpx;
        }
    

      }

      .points {
        width: 690rpx;
        padding: 40rpx 36rpx 0rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.16);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }

    }

    /deep/ .uni-button-color {
      color: #333 !important;
    }

    /deep/ .uni-dialog-button-text {
      color: rgba(51, 51, 51, 0.6)
    }

    .zhanwei {
      width: 750rpx;
      height: 170rpx;
      /* background: #F4F4F2; */
    }

    .tabBarContainer {
      box-sizing: border-box;
      position: fixed;
      bottom: 0rpx;
      left: 0rpx;
      width: 750rpx;
      height: 162rpx;
      background: #FFFFFF;
      box-shadow: 0rpx -8rpx 10rpx 0rpx rgba(0, 0, 0, 0.09);
      border-radius: 60rpx 60rpx 60rpx 60rpx;
      display: flex;
      justify-content: space-around;

      .barBox {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100rpx;

        .text {
          font-family: OPPOSans, OPPOSans;
          font-weight: 400;
          font-size: 20rpx;
          color: #333333;
          opacity: 0.6;
        }

        .selectedTxt {
          font-family: OPPOSans, OPPOSans;
          font-weight: 500;
          font-size: 24rpx;
          color: #333333;
          opacity: 1;
        }



        .iconStyle {
          width: 54rpx;
          height: 54rpx;
          margin-bottom: 20rpx;
        }

        .selectedIconStyle {
          width: 54rpx;
          height: 54rpx;
          margin-bottom: 20rpx;
        }

        .title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #ABABAB;
        }

        .selectedTtitle {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #343434;
        }
      }

    }

    .popUpCoupon {
      .popBox {
        display: flex;
        justify-content: center;
        align-content: center;

        image {
          /* width: 350rpx;
        height: 369rpx; */
          width: 595rpx;
          height: 627.3rpx;
        }

        .couponImg {
          width: 698rpx;
          height: 736rpx;
          background-position: center;
          background-size: cover;
        }

        .h1,
        .h3,
        .h4,
        .h5 {
          text-align: center;
          width: 100%;
        }

        .h1 {
          margin-top: 237rpx;
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 26rpx;
          color: #E38F5A;

        }

        .h2 {
          display: flex;
          margin-top: 60rpx;
          justify-content: center;
          align-items: baseline;

          .icon {
            font-weight: 600;
            font-size: 50rpx;
            color: #FDCA9F;

          }

          .num {
            font-family: PingFang SC;
            font-weight: 600;
            font-size: 90rpx;
            color: #FDCA9F;
            line-height: 27rpx;

          }
        }

        .h3 {
          margin-top: 60rpx;
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 30rpx;
          color: #FFFFFF;
          line-height: 7rpx;
        }

        .h4 {
          margin-top: 30rpx;
        }

        .h5 {
          margin-top: 10rpx;
        }

        .h4,
        .h5 {
          font-weight: 400;
          font-size: 22rpx;
          color: #FFFFFF;
        }

        .btnBox {
          width: 100%;
          display: flex;
          justify-content: center;
          margin-top: 30rpx;

          .btn {
            width: 342rpx;
            height: 66rpx;
          }
        }


      }

      .closeBox {
        width: 626rpx;
        height: 75rpx;

        .closeBtn {
          position: absolute;
          top: 90rpx;
          right: 20rpx;
          width: 40rpx;
          height: 40rpx;

        }
      }


      .saveBtnBox {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 66rpx;
      }

      .saveBtn {
        width: 620rpx;
        height: 88rpx;
        background: #84240E;
        border-radius: 10rpx;
        font-size: 36rpx;
        font-family: SourceHanSerifCN-Heavy, SourceHanSerifCN;
        font-weight: 800;
        color: #FAF3DB;
        line-height: 88rpx;
        letter-spacing: 6px;
        text-align: center;
      }

    }
  }
</style>